<template>
    <!-- shop-details 店铺详情页 -->
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/list-shop' }">店铺列表</el-breadcrumb-item>
      <el-breadcrumb-item>店铺详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div>店铺基本信息</div>
      <el-form ref="shop" :model="shop" label-width="80px"
       label-position="left">
        <div>
          <el-form-item label="店铺ID" label-width="100px">
            <el-input v-model="shop.shop_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="店铺名称" label-width="100px">
            <el-input v-model="shop.shop_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="分店名称" label-width="100px">
            <el-input v-model="shop.shop_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="所属行业" label-width="100px">
            <el-input v-model="sh_shop_busi.busi_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="身份证号" label-width="100px">
            <el-input v-model="shop.rights_id"></el-input>
          </el-form-item>
          <el-form-item label="身份证正面照" label-width="100px">
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
          </el-form-item>
          <el-form-item label="身份证反面照" label-width="100px">
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
          </el-form-item>
          <el-form-item label="地图" label-width="100px">
            <el-image
              style="width: 500px; height: 300px"
              :src="shop.shop_avatar">
            </el-image>
          </el-form-item>
          <el-form-item>
            <el-input v-model="shop.shop_address" label-width="100px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="shop.shop_address" label-width="100px"
            placeholder="输入详细地址地址"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="店铺头像" label-width="100px">
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
          </el-form-item>
          <el-form-item label="主要产品图" label-width="100px">
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
          </el-form-item>
          <el-form-item label="店铺实拍图" label-width="100px">
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
          </el-form-item>
          <el-form-item label="营业执照" label-width="100px">
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
            <el-image
              style="width: 50px; height: 50px"
              :src="shop.shop_avatar">
            </el-image>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: 0,
      shop: {},
      sh_shop_busi: {
        busi_name: this.busi_name ? this.busi_name : '暂无'
      }
    }
  },
  created () {
    this.getShopDetails()
  },
  mounted () {

  },
  methods: {
    async getShopDetails () {
      // 传过来的id
      this.id = this.$route.query.id
      const { data: res } = await this.$http.get(`shop/${this.id}`)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取店铺列表失败')
      this.$message.success('获取店铺详情成功')
      this.shop = res.data
      this.sh_shop_busi = res.data.sh_shop_busi ? res.data.sh_shop_busi : this.sh_shop_busi
    }
  }
}
</script>

<style scoped lang="less">
.el-form{
  display: flex;
  >div{
    flex:1;
  }
  .el-form-item {
    margin-top: 10px;
    width: 90%;
    .el-image{
      border: 5px solid #ccc;
    }
  }
  /deep/.el-image{
      display: inline-block;
      margin: 0 10px;
    }
  /deep/.el-select{
    width: 100%;
  }
}
</style>
